<template>
  <div class="business-box">
    <div
      style="display:flex;margin-bottom:.1rem;padding:.2rem;background: white;"
    >
      <img
        :src="shopInfo.logoUrl"
        alt
        style="width:2rem;height:2rem;border-radius:50%;margin-right:.25rem"
      />
      <div style="text-align:left;width:calc(100% - 2.4rem)">
        <div style="font-size:.4rem;font-weight:500;margin:.1rem 0">
          {{ shopInfo.name }}
          <yd-badge
            type="danger"
            style="font-size:.26rem;position:relative;top:-.05rem;padding-top:.1rem;margin-left:.1rem"
            >休息中...</yd-badge
          >
          <!-- <yd-icon
            name="setting"
            size=".42rem"
            style="float:right"
            @click.native="$router.push('/shopInfo')"
          ></yd-icon>-->
        </div>

        <yd-rate
          size=".3rem"
          :value="shopInfo.bussinsesSorce"
          readonly
        ></yd-rate>
        <div style="font-size:.26rem">
          <yd-icon name="location" size=".4rem" color="#4698ff"></yd-icon
          >&nbsp;{{ shopInfo.merchantAddress }}
        </div>
        <div
          style="font-size:.26rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
        >
          简介: {{ shopInfo.descr }}
        </div>
      </div>
    </div>

    <div
      style="display:flex;flex-wrap:wrap;background: white;"
      class="fn-items"
    >
      <div class="fn-item" @click="$router.push('/business/goods')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shangpin-" />
        </svg>
        商品管理
      </div>
      <div class="fn-item" @click="$router.push('/business/cuts')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon--" />
        </svg>
        折扣管理
      </div>
      <div class="fn-item" @click="$router.push('/business/info')">
        <svg class="icon" aria-hidden="true">
          <use
            xlink:href="#icon-kuanchuangyidianzishangwutubiaoshiliangsucai--"
          />
        </svg>
        店铺信息管理
      </div>
      <div class="fn-item" @click="$router.push('/business/data')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jingyingcelve" />
        </svg>
        经营状况
      </div>
    </div>
  </div>
</template>
<script>
import shopList from './shopList';
import shopData from './shopData';
import shopInfo from './shopInfo';
import addGoods from './addGoods';

import { myShopInfo } from '@/api';
export default {
  name: 'home',
  data() {
    return {
      shopInfo: {}
    };
  },
  computed: {
    isShowBar() {
      const whiteList = [
        '/business/shopData',
        '/business/addGoods',
        '/business/shopInfo'
      ];
      return whiteList.includes(this.$route.path);
    }
  },
  components: {
    shopList,
    shopInfo,
    shopData,
    addGoods
  },
  mounted() {
    this.getShopInfo();
  },
  methods: {
    getShopInfo() {
      myShopInfo({
        userId: 1
      }).then(res => {
        this.shopInfo = res.data;
      });
    }
  }
};
</script>
<style scoped lang="less">
.yd-tabbar-active {
  color: rgb(9, 187, 7) !important;
}

/deep/ .yd-tab {
  .yd-tab-panel {
    background: white !important;
  }
  .yd-tab-box {
    background: rgba(0, 0, 0, 0) !important;

    ul {
      &:after {
        display: none;
      }
      li {
        font-size: 0.32rem;
        font-weight: 500;
      }
    }
  }
}

.fn-items {
  margin-top: 0.15rem;
}

.fn-item {
  width: 33%;
  padding: 0.35rem 0;
  font-size: 0.28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s;

  &:hover {
    background: #ccc;
  }

  svg {
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
  }
}
</style>
